<template>
  <div id="myChart3" class="echarts"></div>
</template>

<script>
export default {
  data() {
    return {
      dataarr: []
    }
  },
  props: {
    namedata: {
      type: Array,
      required: true
    },
    zhibiaodata: {
      type: Array,
      required: true
    },
    xvalue:{
      type: Array,
      required: true
    }
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    drawLine() {
      let myChart = this.$echarts.init(document.getElementById('myChart3'))
      let option = {
        legend: {
          data: this.namedata,
          textStyle: {
            //图例文字的样式
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          data: this.xvalue,
          name: '时间（24h）',
          nameTextStyle: {
            color: '#36e5ff'
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#36e5ff'
            }
          }
        },
        yAxis: {
          splitLine: {
            show: false
          },
          name: '数值',
          nameTextStyle: {
            color: '#36e5ff'
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#36e5ff'
            }
          }
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            // dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ['line', 'bar']
            },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        dataZoom: [
          {

            borderColor: '#22ffff', //边框颜色。
            fillerColor: 'rgba(255,174,94,0.2)',
            backgroundColor: 'rgba(34,255,255,0.1)', //组件的背景颜色
            dataBackground: {
              lineStyle: '#22ffff'
            },
            textStyle: {
              color: '#22ffff'
            }
          },
          {
            type: 'inside'
          }
        ],
        series: this.zhibiaodata
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style>
.echarts {
  width: 100%;
  min-height: 60vh;
  padding: 30px;
}
</style>
